<template>
	<div class="my_submit">
		<van-sticky>
			<van-nav-bar title="企业认证" left-arrow @click-left="back" />
		</van-sticky>
		<div class="mb_18">
			<van-field v-model="form.entName" label="名      称" placeholder="公司名称（必填）" />
			<van-field readonly clickable v-model="form.entAddress" @click="cityTreeTag = true" label="地区" placeholder="地址（必填）" />
			<van-field readonly clickable name="picker" :value="form.industryTypename" label="行业" placeholder="行业（必填）" @click="showIndustryTypename = true" />
			<van-field v-model="form.phone" maxlength="11" type="digit" label="电话号码" placeholder="电话号码（必填）" />
			<p class="title">认证资料</p>
			<div class="uplaod_file">
				<div class="uplaod_card_zz upload_content">
					<!--  <input type="file" @change="uploadFile(...arguments,'logo','/authen/logo')"> -->
					<van-uploader :after-read="afterRead" name="logo" v-model="fileList.logo" :max-size="3 * 1024 * 1024" :max-count="1" />
					<p class="name">企业LOGO</p>
				</div>
			</div>
		</div>
		<p class="tips">您的信息将只用于认证，平台不会用做其他使用</p>
		<div class="btn" @click="authen">立即认证</div>

		<!-- 地区 -->
		<area-popuop v-if="showArea" @confirm="setArea" @cancle="showArea = false"></area-popuop>

		<!-- 行业 -->
		<van-popup v-model="showIndustryTypename" position="bottom">
			<van-picker show-toolbar :columns="industryTypename" @confirm="onConfirm(...arguments,'industryTypename')" @cancel="showIndustryTypename = false" />
		</van-popup>
		<van-popup v-model="cityTreeTag" position="bottom">
			<van-area value="" columns-num='2' :area-list="areaList" @confirm="sure" @cancel='move' cancel-button-text='清除' />
		</van-popup>
		<van-overlay :show="flag" @click="flag = false" />
		<van-loading v-if="flag" size="30px" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);">上传中...</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import api from 'api/api'
	import city from '../../../assets/city.js'
	export default {
		data() {
			return {
				chosenAddressId: '1',
				minDate: new Date(1900, 0, 1),
				maxDate: new Date(2055, 10, 1),
				showTime: false,
				flag:false,
				form: {
					entName: '',
					entType: '',
					entTypename: '',
					regionId: '',
					entAddress: '',
					industryType: '',
					industryTypename: '',
					businessScope: '',
					phone: '',
					level: '',
					levelname: '',
					legalPerson: '',
					licenceId: '',
					logo: '',
					idCardBack: '',
					idCardFront: '',
					regCapital: '',
					establishDate: '',
					creditCode: '',
					companyType: '',
					companyTypename: '',
					opeStatus: '',
					opeStatusname: '',
					businessScope: '',
					entEmail: '',
					entWebsite: '',
					introduction: ''
				},
				fileList: {
					idCardFront: [],
					idCardBack: [],
					licenceId: [],
					logo: []
				},
				upFile: {
					idCardFront: ''
				},
				areaList: {},
				entTypename: [],
				industryTypename: [],
				levelname: [],
				companyTypename: [],
				opeStatusname: [],
				showEntTypename: false,
				showArea: false,
				showentType: false,
				showIndustryTypename: false,
				showLevelname: false,
				showCompanyTypename: false,
				showOpeStatusname: false,
				cityTreeTag: false
			}
		},
		created() {
			this.getAuthenticationTypeDict()
			this.dictGrade()
			this.dictType()
			this.dictIndustry()
			this.dictStatus()
			this.areaList = city
		},
		methods: {

			sure(value) {
				console.log(value)
				this.form.entAddress = value[0].name + '-' + value[1].name
				this.form.regionId = value[1].code

				this.cityTreeTag = false
			},
			move() {
				this.cityTreeTag = false
				this.form.entAddress = ''
				this.form.regionId = ""

			},
			setTime(type) {
				this.showTime = true
			},

			onConfirm(value, num, type) {
				console.log(value, num, type)

				for (let i in this.form) {

					if (i == type) {
						console.log('HAHA', this[i])
						for (let s in this[i]) {
							if (this[i][s].text == value[0]) {
								var name = i.substring(i.length - 4, i, length - 1)
								this.form[name] = this[i][s].code
								console.log(this.form)
							}
						}
						this.form[i] = value[0]



					}
				}
				var arr = type.split('')
				arr[0] = arr[0].toLocaleUpperCase()
				var newType = 'show' + arr.join('')

				console.log(newType)
				this[newType] = false;
			},
			onConfirms(val) {
				this.showTime = false
				var time = new Date(val)
				var year = time.getFullYear()
				var mounth = time.getMonth() + 1
				var day = time.getDate()
				this.form.establishDate = year + '-' + mounth + '-' + day
			},
			formatter(type, val) {
				if (type === 'year') {
					return `${val}年`;
				} else if (type === 'month') {
					return `${val}月`;
				}
				return val;
			},
			afterRead(file, detail) {
				// 此时可以自行将文件上传至服务器
				this.flag=true
				console.log('文件上传', file, detail.name);
				// return
				var data = new FormData();
				var userInfor = JSON.parse(localStorage.getItem('userInfor'))
				data.append('file', file.file)
				data.append('accessToken', userInfor.accessToken)
				data.append('path', 'my/message')
				api.upload(data).then(res => {
					if (res.code == 200) {
						this.$toast('上传成功')
						this.flag=false
						this.avatarFileId = res.data.fileId
						for (let i in this.form) {
							if (i == detail.name) {
								this.form[i] = res.data.fileId
							}
						}
						// console.log(this.form)
					}
					else if(res.code==500){
						this.$router.push('/login')
					}
					else{
						this.$toast("上传失败")
					}
				})

			},

			getAuthenticationTypeDict() {
				api.dictAuthenticationType().then(res => {
					var obj = res.data
					obj.forEach(v => {
						v.text = v.label

					})
					console.log('000000', obj)
					this.entTypename = obj
				})
			},
			dictGrade() {
				api.dictGrade().then(res => {
					var obj = res.data
					obj.forEach(v => {
						v.text = v.label

					})
					this.levelname = obj
				})
			},
			dictType() {
				api.dictType().then(res => {
					var obj = res.data
					obj.forEach(v => {
						v.text = v.label

					})
					this.companyTypename = obj
				})
			},
			dictIndustry() {
				api.dictIndustry().then(res => {
					var obj = res.data
					obj.forEach(v => {
						v.text = v.label

					})
					this.industryTypename = obj
				})
			},
			dictStatus() {
				api.dictStatus().then(res => {
					var obj = res.data
					obj.forEach(v => {
						v.text = v.label

					})
					this.opeStatusname = obj
				})
			},
			back() {
				window.history.go(-1)
			},

			setArea(val) {
				console.log(val)
				this.form.entAddress = []
				val.forEach(v => {
					if (v) {
						this.form.entAddress.push(v.name)
						this.showArea = false
					}
				});
				this.form.entAddress = this.form.entAddress.join('-')
			},

			authen() {
				var form = this.form;
			
				if(form.entName==""){
					this.$toast('公司名称不能为空')
					return
				}
				else if( form.regionId == '' ){
					this.$toast('地区不能为空')
					return
				}
				else if( form.industryType == '' ){
					this.$toast('行业不能为空')
					return
				}
				else if( form.phone == '' ){
					this.$toast('手机号不能为空')
					return
				}
				else if( form.logo == '' ){
					this.$toast('企业login不能为空')
					return
				}
				else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(form.phone))) {
					this.$toast('手机号输入有误')
					return;
				}


				api.setAuthentication_1({
					data: this.form
				}).then(res => {

					this.$toast('认证已经提交')
					this.$router.push('/my')
				})
			},
		}
	}
</script>

<style lang="scss">
	.my_submit {
		min-height: 100vh;
		text-align: left;
		padding-bottom: 1rem;

		.btn {
			width: 6.88rem;
			height: 0.91rem;
			line-height: 0.91rem;
			text-align: center;
			background: linear-gradient(96deg,
				rgba(72, 143, 240, 1),
				rgba(51, 130, 239, 1));
			border-radius: 0.45rem;
			margin: 0 auto;
			color: #fff;
			font-size: 0.36rem;
			margin-top: 0.5rem;
		}

		.mb_18 {
			margin-bottom: 0.18rem;
		}

		.mb_105 {
			margin-bottom: 1.05rem;
		}

		.title {
			font-size: 0.3rem;
			padding: 0.3rem;
		}

		.uplaod_file {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0.3rem;

			.upload_content {
				width: 3.13rem;
				height: 2.07rem;
				position: relative;
				margin-right: 0.6rem;
				margin-bottom: 0.88rem;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				background-color: rgba(72, 143, 240, 0.1);

				&:nth-child(2n) {
					margin-right: 0;
				}

				.van-uploader__upload,
				.van-uploader__preview-image {
					width: 3.13rem;
					height: 2.07rem;

				}

				input {
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
				}

				.name {
					position: absolute;
					left: 0;
					right: 0;
					bottom: -0.6rem;
					color: #000;
					font-size: 0.26rem;
					text-align: center;
				}
			}

			.uplaod_card_font {
				position: relative;
			}

			.uplaod_card_back {
				width: 3.13rem;
				height: 2.07rem;
			}

			.uplaod_card_zz {
				width: 3.13rem;
				height: 2.07rem;
			}
		}

		.tips {
			font-size: 0.22rem;
			color: #999;
			padding: 0.1rem 0.3rem;
		}
	}
</style>
